<template>
    <view class="page-wrap">
        <scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
            <view class="scroll-list">
                <view class="list-item" v-for="(item, index) in list" :key="index">
                    <view class="name" @click="handleDormitory(item)">{{item.name}}
                        <view class="mobile">{{item.mobile}}</view>
                        <view class="def" v-if="item.def == 1">默认</view>
                        <view class="detail">
                            {{item.schoolName}} {{item.buildingName}} {{item.address}}
                        </view>
                    </view>
                    <view class="edit">
                        <u-icon size="1.5em" name="edit-pen" @click="toEdit(item.id)"></u-icon>
                    </view>
                    <view class="remove">
                        <u-icon size="1.5em" name="trash" @click="toEdit"></u-icon>
                    </view>
                </view>
            </view>
        </scroll-list>
        <footer-wrap>
            <view class="footer">
                <u-button shape="circle" type="primary" @click="toEdit('')">添加地址</u-button>
            </view>
        </footer-wrap>
        <global-components ref="global-components" :loading="false"></global-components>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        data() {
            return {
                schoolId: '',
                list: [],
                option: {
                    size: 15, // 分页大小
                    auto: true // 自动加载列表
                },
            };
        },
        computed: {},
        methods: {
            // 加载数据
            load(paging) {
                this.$api.dormitory.list({
                    schoolId: this.schoolId
                }).then(res => {
                    this.list = this.list.concat(res.list);
                    // 加载成功
                    this.$refs.list.loadSuccess({
                        list: this.list,
                        total: 0
                    });
                })
                // 加载失败
                // this.$refs.list.loadFail();
            },
            // 刷新刷剧
            refresh(paging) {
                this.$api.dormitory.list({
                    schoolId: this.schoolId
                }).then(res => {
                    this.list = res.list;
                    // 刷新成功
                    this.$refs.list.refreshSuccess({
                        list: this.list,
                        total: 0
                    });
                })
                // 刷新失败
                // this.$refs.list.refreshFail();
            },
            toEdit(id = '') {
                this.$toPage({
                    url: '/pages/dormitory/edit?id=' + id
                });
            },
            handleDormitory(info) {
                if (this.event) {
                    uni.$emit(this.event, info);
                    this.$toPage({
                        type: 'back'
                    });
                }
            }
        },
        watch: {},
        onLoad(option) {
            this.schoolId = option.schoolId || '';
            this.event = option.event || '';
        },
        onShow() {},
        onHide() {},
        onUnload() {},
        onReachBottom() {},
        onPageScroll(event) {},
        onPullDownRefresh() {},
        onShareAppMessage(options) {}
    };
</script>

<style scoped lang="scss">
    .page-wrap {
        background: #fff;
        padding: 0 32rpx;

        .scroll-list {
            margin-bottom: 100rpx;

            .list-item {
                padding: 32rpx 0;
                border-bottom: 1rpx solid #eee;
                display: flex;

                .name {
                    font-size: 32rpx;
                    margin-bottom: 12rpx;
                    flex-grow: 1;

                    .mobile {
                        margin: 0 1em;
                        display: inline-block;
                    }

                    .def {
                        display: inline-block;
                        color: $primary-color;
                        border: 1rpx solid $primary-color;
                        font-size: 0.8em;
                        padding: 0.1em 0.2em;
                    }

                    .detail {
                        font-size: 0.9em;
                        opacity: 0.6;
                    }
                }

                .edit {
                    margin-left: 1em;
                }

                .remove {
                    margin-left: 1em;
                    color: $error-color;
                }
            }
        }

        .footer {
            background-color: #fff;
            padding: 32rpx;
        }
    }
</style>